<template>
  <p-card :bordered="false" class="containent">
    <!-- 查询区域 -->
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 头部条码扫描 -->
      <p-row type="flex" :gutter="24">
        <p-col flex="auto">
          <p-form-model layout="inline" :model="topForm" :rules="rules">
            <p-row :gutter="24">
              <p-col :xl="8" :md="12">
                <p-form-model-item label="条码扫描">
                  <p-input
                    placeholder="请扫描"
                    @pressEnter="changeScan"
                    v-model.trim="searchForm.SN"
                  ></p-input>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="线体">
                  <p-select
                    v-model="topForm.lineno"
                    @change="changeLine"
                    allowClear
                  >
                    <p-select-option
                      v-for="item in lines"
                      :key="item.codeValue"
                      :value="item.codeValue"
                      >{{ item.textValue }}</p-select-option
                    >
                  </p-select>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="工站">
                  <p-tree-select
                    v-model="topForm.stationCode"
                    :tree-data="stations"
                    :dropdown-style="{ maxHeight: '500px' }"
                    tree-node-filter-prop="title"
                    show-search
                    allow-clear
                    @change="changeHandler"
                  />
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
        </p-col>
        <p-col style="padding-top: 2px">
          <p-button type="primary" @click="path('/work/datacollect/Processkey')"
            >关键件采集</p-button
          >
          <p-button
            type="primary"
            style="margin: 0 10px"
            @click="path('/work/datacollect/Packaging')"
            >包装采集</p-button
          >
          <p-button type="primary" @click="path('/work/datacollect/Startaging')"
            >老化采集</p-button
          >
        </p-col>
      </p-row>
      <div class="product-execu-title">
        <div class="float-right">
          <p-button
            :disabled="form.ageStatus !== 0"
            type="primary"
            @click="agingHandler(form)"
            >老化例外设置</p-button
          >
        </div>
        容器信息
      </div>
      <p-form-model layout="inline">
        <p-row :gutter="24">
          <p-col :sm="6">
            <p-form-model-item label="容器码">
              <p-input :value="form.barCode" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="6">
            <p-form-model-item label="产品描述">
              <p-input :value="form.productName" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="6">
            <p-form-model-item label="数量">
              <p-input :value="form.productQty" read-only />
            </p-form-model-item>
          </p-col>
          <p-col :sm="6">
            <p-form-model-item label="容器状态">
              <p-input :value="ageingStatus" read-only />
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <p-row :gutter="20">
        <p-col :sm="6">
          <div class="product-execu-amount product-execu-amount__primary">
            <p-statistic :value="ageNum.endAgedCount || 0" title="已老化" />
          </div>
        </p-col>
        <p-col :sm="6">
          <div class="product-execu-amount product-execu-amount__pending">
            <p-statistic :value="ageNum.waitAgeCount || 0" title="待老化" />
          </div>
        </p-col>
        <p-col :sm="6">
          <div class="product-execu-amount product-execu-amount__collected">
            <p-statistic :value="ageNum.agingCount || 0" title="老化中" />
          </div>
        </p-col>
        <p-col v-if="form.ageStatus === 1" :sm="6">
          <div class="product-execu-amount product-execu-amount__danger">
            <p-statistic-countdown :value="countdown" title="老化中" />
          </div>
        </p-col>
      </p-row>
      <p-tabs v-model="tab">
        <template slot="tabBarExtraContent">
          <div v-show="tab === 'container'">
            <p-button
              v-if="form.ageStatus === 0"
              type="primary"
              @click="startAging"
              >开始老化</p-button
            >
            <p-button
              v-else-if="form.ageStatus === 1"
              type="primary"
              @click="endAging"
              >结束老化</p-button
            >
          </div>
        </template>
        <p-tab-pane key="container" tab="容器清单">
          <p-table
            size="middle"
            bordered
            :pagination="false"
            rowKey="id"
            :columns="columns"
            :scroll="tableScroll"
            :dataSource="dataSource"
            :loading="loading"
          />
        </p-tab-pane>
        <p-tab-pane key="ageing" tab="老化记录">
          <p-table
            size="middle"
            bordered
            :pagination="false"
            rowKey="id"
            :columns="columns1"
            :dataSource="bindrecordData"
            :loading="loadingRecord"
          />
        </p-tab-pane>
      </p-tabs>
    </div>
    <!-- 弹出窗 老化例外设置-->
    <Agingexception ref="AgingModule"></Agingexception>
    <!-- 提前老化结束原因 -->
    <Reason ref="Reason" @endOking="endOking"></Reason>
  </p-card>
</template>

<script>
import { api } from "@/api/manage";
import { filterObj, timestampToDatetime } from "@/utils/util";
import { postAction, getAction, deleteAction, httpAction } from "@/api/manage";
import Agingexception from "./modules/Agingexception";
import Reason from "./modules/Reason";
import mixins from "./modules/line-station";

//当前容器清单
const columns = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "线体",
    align: "center",
    dataIndex: "lineName",
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "PN/SN",
    align: "center",
    dataIndex: "pnsn",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品描述",
    align: "center",
    dataIndex: "productName",
  },
];
//老化记录
const Binding_record = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 45,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "线体",
    align: "center",
    dataIndex: "lineName",
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品描述",
    align: "center",
    dataIndex: "productName",
  },
  {
    title: "数量",
    align: "center",
    width: 60,
    dataIndex: "qty",
  },
  {
    title: "SN",
    align: "center",
    dataIndex: "pnsn",
  },
  {
    title: "容器码",
    align: "center",
    dataIndex: "containerCode",
  },
  {
    title: "老化开始时间",
    align: "center",
    dataIndex: "ageStartTime",
    customRender: (text) => {
      return timestampToDatetime(text, 1);
    },
  },
  {
    title: "老化预计结束时间",
    align: "center",
    dataIndex: "ageExpectEndTime",
    customRender: (text) => {
      return timestampToDatetime(text, 1);
    },
  },
  {
    title: "老化状态",
    align: "center",
    width: 70,
    dataIndex: "ageStatus",
    customRender: (text) => {
      switch (text) {
        case 0:
          return "未开始";
        case 1:
          return "老化中";
        case 2:
          return "已结束";
        case 3:
          return "提前结束";
      }
    },
  },
  {
    title: "操作人",
    align: "center",
    dataIndex: "operaterName",
  },
  {
    title: "信息推送",
    align: "center",
    dataIndex: "mgsPush",
  },
];
export default {
  name: "",
  mixins: [mixins],
  components: {
    Agingexception,
    Reason,
  },
  data() {
    return {
      url: {
        getGZ: "/mes-craft/craft/mesPeDefinition/getAllStation", //获取工站
        startAging: "/mes-manufacture/mfAgingLogs/startAging", //开始老化
        getAgingInfo: "/mes-manufacture/mfAgingLogs/getAgingInfoByBarCode", //根据条码获取老化详情
        containerInfo:
          "/mes-manufacture/mfContainer/getContainerInfoByContainer", //分页获取当前容器清单
        getAgeHistory: "/mes-manufacture/mfAgingLogs/getAgeHistory", //老化记录
        getAgingnum: "/mes-manufacture/mfAgingLogs/getAgingCount", //获得老化数量统计
        judgeAging: "/mes-manufacture/mfAgingLogs/readyForAgeByBarCode", //判断是否需要老化
        endAging: "/mes-manufacture/mfAgingLogs/endAging", //开始老化
      },
      columns: [], //条码信息表格
      columns1: [], //右下角表
      dataSource: [],
      bindrecordData: [],
      searchForm: {
        SN: "",
        info: "",
      },
      tableScroll1: {
        y: 400,
      },
      form: {
        // barCode: "", //容器码
        // productCode: "", //产品编码
        // productName: "", //产品名称
        // standarAgingTime: "", //标准老化时长
        // productQty: "", //产品数量
      },
      selectedRowKeys: [],
      selectionRows: [], //选中的record
      stationList: [],
      loadingRecord: false,
      Semifinshed: true,
      rules: {
        SN: [{ required: true, message: "请先扫描容器", trigger: "blur" }],
      },
      ageNum: {
        agingCount: "",
        endAgedCount: "",
        waitAgeCount: "",
      },
      countdown: "",
      tab: "container",
    };
  },
  computed: {
    tableScroll: function () {
      return {
        x: 300,
        // y: 160,
      };
    },
    ageingStatus() {
      let text = "";
      if (this.form) {
        switch (this.form.ageStatus) {
          case 0:
            text = "未老化";
            break;
          case 1:
            text = "老化中";
            break;
          case 2:
            text = "老化结束";
            break;
        }
      }
      return text;
    },
  },
  created() {
    this.columns = columns;
    this.columns1 = Binding_record;
    this.getAgingnum();
  },
  mounted() {
    this.getColumns();
  },
  methods: {
    timestampToDatetime,
    //根据条码获得老化详情
    getAgingInfo() {
      this.countdown = "";
      this.form = {};
      getAction(this.url.judgeAging, { barCode: this.searchForm.SN }).then(
        (res) => {
          if (res.data) {
            switch (res.data.ageStatus) {
              case 0:
                this.$message.success("扫描成功");
                break;
              case 1:
                this.countdown = Date.now() + res.data.remainingTime;
                break;
              case 2:
                this.$message.success("该容器已经老化结束");
                break;
            }
            this.form = res.data;
            this.containerInfo();
          } else {
            this.$message.warning(res.msg);
            this.dataSource = [];
            this.Semifinshed = false;
          }
        }
      );
    },

    getAgingnum() {
      getAction(this.url.getAgingnum).then((res) => {
        if (res.success) {
          this.ageNum = res.data;
        }
      });
    },
    //获得老化记录
    getColumns() {
      this.loadingRecord = true;
      let params = {
        lineCode: this.topForm.lineCode,
        stationCode: this.topForm.stationCode,
      };
      postAction(this.url.getAgeHistory, params).then((res) => {
        if (res.success) {
          this.bindrecordData = res.data;
        }
        this.loadingRecord = false;
      });
    },
    //老化例外设置
    agingHandler(container) {
      if (container.barCode) {
        this.$refs.AgingModule.edit(container);
        this.$refs.AgingModule.title = "老化例外设置";
        this.$refs.AgingModule.disableSubmit = false;
      } else {
        this.$message.warning("未扫描容器或容器不存在老化工序");
      }
    },
    //获取当前容器清单
    containerInfo() {
      let params = {
        containerCode: this.searchForm.SN,
        bindFlag: 1,
      };
      postAction(this.url.containerInfo, params).then((res) => {
        if (res.data) {
          this.dataSource = res.data.childrens || [];
        } else {
          this.dataSource = [];
        }
      });
    },
    //开始老化
    startAging() {
      if (this.searchForm.SN) {
        if (!this.form.barCode) {
          return this.$message.warning("条码错误或未设置老化工序");
        }
        if (this.form.ageStatus === 0) {
          let ageTime =
            this.$refs.AgingModule.form.newTime || this.form.standarAgingTime;
          let params = {
            ageTime,
            barCode: this.form.barCode,
            lineCode: this.topForm.lineno,
            lineName: this.topForm.lineName,
            stationCode: this.topForm.stationCode,
            stationName: this.topForm.stationName,
          };
          postAction(this.url.startAging, params).then((res) => {
            if (res.data) {
              this.getColumns();
              this.getAgingInfo();
              this.getAgingnum();
            } else {
              this.$message.warning("开始老化失败");
            }
          });
        } else {
          this.$message.warning("该容器已经结束老化或不存在老化工序");
        }
      }
    },
    //结束弹窗
    endAging() {
      if (this.searchForm.SN) {
        if (!this.form.barCode) {
          return this.$message.warning("请先扫描容器再点击结束老化");
        }
        if (this.form.remainingTime && this.form.remainingTime > 0) {
          this.$refs.Reason.edit();
          this.$refs.Reason.title = "提醒";
          this.$refs.Reason.disableSubmit = false;
        } else {
          this.endOking();
        }
      } else {
        this.$message.warning("该容器已经结束老化或不存在老化工序");
      }
    },
    // 结束老化
    endOking(earlyEndAgingReason) {
      this.countdown = "";
      let params = {
        barCode: this.form.barCode,
        earlyEndAgingReason,
        lineCode: this.topForm.lineno,
        lineName: this.topForm.lineName,
        stationCode: this.topForm.stationCode,
        stationName: this.topForm.stationName,
      };
      postAction(this.url.endAging, params)
        .then((res) => {
          if (res.data) {
            this.$message.success("老化结束成功");
            this.getColumns();
            this.getAgingnum();
          } else {
            this.$message.warning("结束老化失败");
          }
        })
        .finally(() => {
          this.$refs.Reason.visible = false;
        });
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      console.log(this.selectedRowKeys, this.selectionRows);
    },
    changeScan() {
      if (!this.searchForm.SN) {
        this.$message.warning("请先扫描条码");
        return;
      }
      this.getAgingInfo();
    },
  },
};
</script>
<style lang='less' scoped>
</style>